<template>
  <el-dialog
    title="上传"
    :visible="dialogVisible"
    width="30%"
    :before-close="handleClose"
    :close-on-click-modal="false"
  >
    <div class="chosenMonth-container">
      <el-date-picker
        v-model="month.value"
        type="month"
        placeholder="选择月"
        value-format="yyyy-MM"
      >
      </el-date-picker>
    </div>
    <el-upload
      class="upload-demo"
      ref="upload"
      action="http://yang1yu.site:8080/file/upload"
      multiple
      drag
      :headers="headers"
      :file-list="fileList"
      :auto-upload="false"
      :data="month"
      :before-upload="beforeUpload"
      accept="application/pdf"
    >
    <i class="el-icon-upload"></i>
  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div slot="tip" class="el-upload__tip">
        只能上传pdf文件，且不超过512kb
      </div>
    </el-upload>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" type="success" @click="submitUpload">上传到服务器</el-button>
    </span>
  </el-dialog>
</template>
<script>
export default {
  name: "Upload",
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      month: {
        value: "",
      },
      fileList: [],
      headers: {
        token: sessionStorage.getItem("token"),
      },
      user: {},
    };
  },
  watch: {
    dialogVisible(newVal, oldVal) {
      console.log(newVal, 'marked');
      if(newVal) {
        this.getUser();
      }
    }
  },
  methods: {
    handleClose(isRefresh = false) {
      this.$emit("toClose", isRefresh);
    },
    beforeUpload(file) {
      const isPDF = file.type === "application/pdf";
      const isLt512KB = file.size / 1024 / 1024 < 0.5;
      if (!isPDF) {
        this.$message.error("上传图片只能是 PDF 格式!");
      }
      if (!isLt512KB) {
        this.$message.error("上传图片大小不能超过 512KB!");
      }
      return isPDF && isLt512KB;
    },
    submitUpload() {
      console.log("month:", this.month);
      if (this.month.value == "" || this.month.value == null) {
        console.log("选择月份之后再进行上传");
        this.$alert("请选择月份之后再进行上传", "警告", {
          confirmButtonText: "确定",
        });
      } else {
        this.$refs.upload.submit();
      }
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    toUpload() {
      this.$router.push({ path: "/upload" });
    },
    toMonth() {
      this.$router.push({ path: "/month" });
    },
    toSum() {
      this.$router.push({ path: "/sum" });
    },
    toMain() {
      this.$router.push({ path: "/main" });
    },
    logout() {
      console.log("logout");
      this.$axios({
        method: "get",
        url: "/user/out",
        headers: {
          token: sessionStorage.getItem("token"),
        },
      }).then((res) => {
        if (res.data.code == 0) {
          sessionStorage.clear();
          this.$router.replace({ path: "/" });
        }
      });
    },
    getUser() {
      this.$axios({
        method: "get",
        url: "/user/get",
        headers: {
          token: sessionStorage.getItem("token"),
        },
      }).then((res) => {
        if (res.data.code == 0) {
          this.user = res.data.data;
        }
      });
    },
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.chosenMonth-container {
  margin-bottom: 10px;
}
</style>
